<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <App></App>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    /* 
  
    */

    /* 
    所有定义的组件本质都VueComponent函数
    */
   
    debugger
    const App = Vue.extend({
      name: 'APP', // vue调试工具显示组件标签名
      template: `
        <div>
          <h2>count: {{count}}</h2>
          <p @click="deleteMsg">msg: {{obj.msg}}</p>
        </div>
      `,
      data () { // 必须是函数
        return {
          count: 1,
          obj: {
            msg: 'abc'
          }
        }
      },

      mounted () {
        console.log(this, 'App组件实例')
        // 通过组件对象得到'abc'
        console.log(this.__proto__.__proto__.xxx)
      },

      methods: {
        deleteMsg () {
          // this是组件的实例
          this.$delete(this.obj, 'msg')

          // 通过组件对象来得到Vue原型对象上的$obj属性对象, 再调用其方法
          this.$obj.test()
        }
      }
    })

    const vm = new Vue({
      components: {
        App,
      }
    })
    console.log(vm, 'Vue实例')
    vm.__proto__.xxx = 'abc'
    Vue.prototype.$obj = {
      test() {
        console.log('test')
      }
    }

    vm.$mount('#test')

    /* 
    Vue与VueComponent
    关系: VueComponent的原型对象的原型对象是Vue的原型对象
        VueComponent.protoype.__proto__ === Vue.prototype
        vc.__proto__.__proto__ === vm.__proto__
        组件或组件对象的父亲(原型对象)的父亲 是Vue或vm的父亲

        意味着: 组件对象可以直接访问Vue原型对象上的所有属性和方法

        在Vue的原型对象上有: $set/$delete方法
        在组件中是否可以通过this来调用这2个方法: this.$set()

        当我们想让一个对象或一个函数让所有组件都能看到:
          将这个对象或函数添加到Vue的原型对象上
    */
  </script>
</body>
</html>